<template>
	<view>
		<view v-if="loading">加载中...</view>
		<view v-else class="detail">
			<img :src="detail.imgurl" alt="" style="width: 100%; height: 200px; margin-bottom: 10px;">
			<h3>{{detail.title}}</h3>
			<view class="p">
				<span class="pf">{{ detail.num }} </span>
				<span>{{ detail.pl }}点评</span>
			</view>

			<view class="p1">
				<span class="pa">
					<span class="type" v-for="i in detail.type">{{i}}</span>
				</span>
				<span class="px" @click="xq(detail)">详情设施
					<img src="/static/向右箭头.png" class="img" />
				</span>
			</view>
		</view>
		<view class="con1">
			<view v-for="item in houseDetail" :key="item._id" class="ul"
			@click="fx(item)">
				<img :src=item.imgurl alt="" class="img1">
				<view class="con">
					<view class="big">{{item.title}}</view>
					<view class="yh">
						<span>{{item.gg}}&nbsp;</span>
						<span>可入住{{item.zr}}人&nbsp;&nbsp;</span>
						<span>{{item.pf}}㎡</span>
					</view>
					<view>
						<span class="yellow">仅剩{{item.sy}}间</span>
						<span class="right">￥{{item.price}}</span>
					</view>
				</view>
			</view>
		</view>
		<view class="con2">
			<view class="pl">
				<view class="big">住客评价</view>
				<view v-for="item in plList.slice(0,1)" :key="item._id" class="li">
					<view class="con">
						<view>
							<img :src="item.imgurl" class="nc">
							<view class="zi">{{item.username}}</view>
						</view>
						<view class="right">{{item.time}}</view>
					</view>
					<view class="c1">
						<view class="zi1">{{item.fx}}</view>
						<view class="zi2">{{item.star}}分</view>
					</view>
					<view class="c2">
						<view>{{item.content}}</view>
					</view>
					<view class="c3">
						<button @click="commit(detail)">全部点评</button>
					</view>
				</view>
			</view>

			<view class="btm">
				<button class="bn">酒店电话</button>
				<view class="bn1">
					<img src="/static/地图.png" class="img2" alt="">
					<text>导航</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, onMounted } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	const detail = ref<any>({});
	const houseDetail = ref<any>({})
	const plList = ref<any>({})
	const loading = ref<boolean>(true);
	onLoad((options) => {
		if (options.item) {
			try {
				const itemStr = decodeURIComponent(options.item);
				detail.value = JSON.parse(itemStr);
				loading.value = false;
			} catch (error) {
				console.error('解析数据失败:', error);
			}
		}
	});
	const xq = ((item : any) => {
		const itemStr = encodeURIComponent(JSON.stringify(item))
		uni.navigateTo({
			url: `/pages/xqdetail/xqdetail?item=${itemStr}`

		})
	})
	const commit=((item:any)=>{
		const itemStr =encodeURIComponent(JSON.stringify(item))
		uni.navigateTo({
			url:`/pages/cdetail/cdetail?item=${itemStr}`
		})
	})
	const fx = ((item:any)=>{
		const itemStr =encodeURIComponent(JSON.stringify(item))
		uni.navigateTo({
			url:`/pages/fxdetail/fxdetail?item=${itemStr}`
		})
	})
	const getlist1 = () => {
		uni.request({
			url: `http://127.0.0.1:3000/ljy/houseinfo`,
			method: 'GET',
			data: {
				houseDetail: houseDetail.value,
				id: detail.value._id
			},
			success(res : any) {
				if (res.data.code == 200) {
					houseDetail.value = res.data.data
				}
			}
		})
	}
	const getlist2 = () => {
		uni.request({
			url: 'http://127.0.0.1:3000/ljy/comment',
			method: 'GET',
			data: {
				plList: plList.value,
				id: detail.value._id
			},
			success(res : any) {
				if (res.data.code == 200) {
					console.log(res.data.data);
					plList.value = res.data.data
				}
			}
		})
	}
	onMounted(() => {
		getlist1()
	})
	onMounted(() => {
		getlist2()
	})
</script>

<style scoped lang="scss">
view {
	background-color: rgb(242, 242, 242);
	box-sizing: border-box;
	.detail {
		// background-color: ghostwhite;
		border-bottom: 1px white solid;
		margin-bottom: 10px;

		.p {
			font-size: 12px;
			line-height: 20px;
			margin-bottom: 10px;
			margin-top: 10px;
		}

		.pf {
			background-color: blue;
			width: 50px;
			color: white;
			text-align: center;
			display: inline-block;
			margin-right: 10px;
			margin-left: 5px;
		}

		.p1 {
			margin-bottom: 15px;

			.px {
				float: right;
				margin-right: 10px;

				.img {
					height: 25rpx;
					width: 25rpx;
				}
			}

			.pa {
				margin-left: 5px;
				width: 440rpx;
				color: green;
				padding: 5rpx;
				font-size: 12px;
				display: inline-block;

				.type {
					border: 1px solid green;
					color: green;
					text-align: center;
					margin-right: 20rpx;
					font-size: 28rpx;
					padding: 4rpx;
				}
			}

			img {
				width: 20px;
				height: 15px;
				margin-top: 10px;
			}
		}
	}

	.con1 {
		background-color: white;

		.img1 {
			width: 320rpx;
			height: 220rpx;
		}

		.ul {
			display: flex;
			margin: 5px;
			border: 1px solid white;
			border-radius: 10px;

			.con {
				margin-left: 10px;
				margin-top: 10px;

				.yh {
					font-size: 13px;
					color: gray;
					margin-top: 10px;
					margin-bottom: 15px;
				}

				.right {
					float: right;
					color: blue;
					font-size: 20px;
				}

				.yellow {
					color: orange;
					font-size: 14px;

				}
			}

		}
	}

	.con2 {
		background-color: white;
		color: #000;

		.pl {
			padding: 20rpx;
			width: 750rpx;
			padding-bottom: 100rpx;

			.big {
				font-size: 35rpx;
				font-weight: bold;
				padding-bottom: 20rpx;
			}

			.li {
				.con {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding-bottom: 5rpx;
					

					view {
						display: flex;
						font-size: 14px;

						.nc {
							width: 80rpx;
							height: 80rpx;
							
							border-radius: 25px;
						}

						.zi {
							margin-top: 10px;
							padding-left: 20rpx;
						}
					}

					.right {
						padding-right: 60rpx;
						color: gray;
					}
				}
				.c1 {
					display: flex;
					justify-content: space-between;
					padding-right: 60rpx;
					padding-left: 100rpx;
					font-size: 14px;
					.zi1 {
						color: gray;
				
					}
				
					.zi2 {
						background-color: skyblue;
						width: 100rpx;
						text-align: center;
					}
				}
				
				.c2 {
					padding-right: 50rpx;
					padding-left: 100rpx;
					padding-top: 10rpx;
				}
				
				.c3 {
					margin: auto;
					width: 120px;
					padding-top: 10rpx;
				}
			}
		}
	}

	.btm {
		position: fixed;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 100rpx;
		width: 100%;
		background-color: gainsboro;
		view {
			width: 50%;
			line-height: 100rpx;
			text-align: center;
			display: flex;
			background-color: gainsboro;
			align-items: center;
			justify-content: center;

			.img2 {
				width: 15%;
				height: 25px;
				text-align: center;
			}

			text {
				text-align: center;
				font-size: 14px;

			}
		}

		.bn {
			width: 50%;
			background-color: blue;
			color: white;
		}

	}
}
</style>